<template>
  <ul id="list">
    <li @click="toDetail(v.id)" v-for="v in searchList" :key="v.id">
      <div class="list-img">
        <img :src="v.image" alt="">
      </div>
      <div class="list-desc">
        <div class="list-desc-title">
          <span>{{ v.name + " " }}</span>
          <span>{{ v.detailDesc }}</span>
        </div>
        <div class="list-desc-price">
          <i class="iconfont icon-qianqian-"></i>
          <span>{{ v.price }}</span>
          <span @click.stop="addToCart(v)" class="list-desc-price-cart">+加购</span>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'SearchList',
  components: {

  },
  props: ['searchList'],
  data() {
    return {

    }
  },
  methods: {
    toDetail(id) {
      this.$router.push({ name: "detail", params: { id } })
    },
    addToCart(v) {
      const data = {
        id:v.id,
        title:v.title,
        price:v.price,
        goodsNum: 1,
        image:v.image
      }
      // 提示添加成功
      this.$notify({type:'success',text:'√ 添加成功'})
      this.$store.commit('cart/ADDGOODS', data)
    }
  }
};
</script>
<style lang='less' scoped>
#list {
  overflow: hidden;

  li {
    display: flex;
    width: 35rem;
    height: 12rem;
    background-color: rgb(246, 244, 244);
    margin: 0 auto;
    margin-bottom: 1rem;

    .list-img {
      img {
        display: inline-block;
        width: 12rem;
        height: 12rem;
        background-color: beige;
      }
    }

    .list-desc {
      .list-desc-title {
        font-size: 1.8rem;
        height: 5.5rem;
      }

      .list-desc-price {
        margin-top: 3rem;
        color: red;

        .iconfont {
          font-size: 1rem;
          color: red;
          margin-left: 1rem;
          margin-right: 1rem;
        }
      }

      .list-desc-price-cart {
        font-size: 1.2rem;
        margin-left: 10rem;
        color: orange;
      }
    }
  }
}
</style>